<template>
    <div>
      <el-select v-model="seleprovince" placeholder="请选择" @change="selectFun" :style="region?'width:33%':'width:49%'">
        <el-option
          v-for="(item,index) in this.province"
          :key="item.value"
          :label="item.label"
          :value="index+'|province'">
        </el-option>
      </el-select>
      <el-select v-model="selecity" placeholder="请选择" @change="selectFun" :style="region?'width:33%':'width:49%'">
        <el-option
          v-for="(item,index) in this.city"
          :key="item.value"
          :label="item.label"
          :value="index+'|city'">
        </el-option>
      </el-select>
      <el-select v-model="seleregin" v-if="myRegion" placeholder="请选择" @change="selectFun" style="width:32%">
        <el-option
          v-for="(item,index) in this.Region"
          :key="item.value"
          :label="item.label"
          :value="index+'|regin'">
        </el-option>
      </el-select>
    </div>
</template>

<script>
  import Util from "../assets/Util"
  export default {
    props:{
      region:Number,
      defaultData:Object
    },
    name: 'selectMap',
    data(){
      return {
        allArea:[],
        province:[],
        city:[],
        Region:[],
        seleprovince:'',
        selecity:"",
        seleregin:"",
        seleprovinceid:"",
        selecityid:"",
        selereginid:"",
        seleprovinceIndex:0,
        selecityIndex:0,
        myRegion:this.region
      }
    },
    mounted(){
      this.getArea();
      if(this.defaultData){
        this.seleprovince = this.defaultData.province;
        this.selecity = this.defaultData.city;
        this.seleregin = this.defaultData.region;
      }
    },
    watch:{
      "defaultData.province":function(newValue){
        this.seleprovince = newValue;
      },
      "defaultData.city":function(newValue){
        this.selecity = newValue;
      },
      "defaultData.region":function(newValue){
        this.seleregin = newValue;
      }

    },
    methods:{
      // 获取热门省市区
      getArea(){
        let that = this;
        let areaProps = {
          url:"/Common/GetArea",
          sCallBack:(res) => {
            let item = res.data.data.listProvince;
            localStorage.setItem("allArea", JSON.stringify(item));
            that.allArea = item;
            this.$emit("loadFun");
            item.forEach(element => {
              that.province.push({'label':element.name, 'value':element.id})
            });
          },
          eCallBack:(err) => {
            console.log(err);
          }
        }
        if(localStorage.getItem("allArea")){
          let item = JSON.parse(localStorage.getItem("allArea"));
          that.allArea = item;
          this.$emit("loadFun");
          item.forEach(element => {
            that.province.push({'label':element.name, 'value':element.id})
          });
        }else{
          Util.myRequest(areaProps);
        }
      },
      // 选择地址
      selectFun(e){
        let eArr = e.split("|");
        let index = eArr[0];
        let name = eArr[1];
        let that = this;
        switch (name) {
          case "province":
            let cityArr = that.allArea[index]["data"];
            that.city = [];
            cityArr.forEach(element => {
              that.city.push({'label':element.name, 'value':element.id})
            });
            that.seleprovinceIndex = index;
            that.selecity = "请选择";
            that.seleregin = "请选择";
            that.Region = [];
            that.$emit("selectMapFun", {
              type:'province',
              provinceID:that.allArea[index]["id"],
              name:that.allArea[index]['name']
            });
            break;
          case "city":
            let reginArr = that.allArea[that.seleprovinceIndex]["data"][index]['data'];
            that.Region = [];
            reginArr.forEach(element => {
              that.Region.push({'label':element.name, 'value':element.id})
            });
            that.selecityIndex = index;
            that.seleregin = "请选择";
            that.$emit("selectMapFun", {
              type:'city',
              cityID:that.allArea[that.seleprovinceIndex]["data"][index]['id'],
              name:that.allArea[that.seleprovinceIndex]["data"][index]['name']
            });
            break;
          case "regin":
            let seleProvinceIndex = that.seleprovinceIndex;
            let seleCityIndex = that.selecityIndex;
            let seleReginIndex = that.seleregin.split("|")[0];
            let address = that.allArea[seleProvinceIndex]['name'] + "-" + that.allArea[seleProvinceIndex]['data'][seleCityIndex]['name'] + "-" + that.allArea[seleProvinceIndex]['data'][seleCityIndex]['data'][seleReginIndex]['name'];
            that.$emit("selectMapFun", {
              type:'region',
              regionID:that.allArea[that.seleprovinceIndex]["data"][that.selecityIndex]['data'][index]['id'],
              address:address,
              name:that.allArea[that.seleprovinceIndex]["data"][that.selecityIndex]['data'][index]['name']
            });
            break;
        }
      }
    }
  }
</script>

<style scoped>

</style>
